<template>
  <el-form
    :inline="true"
    :model="formInline"
    style="margin-top: 40px; margin-left: 40px"
    class="demo-form-inline"
  >
    <el-form-item label="Name:">
      <el-input
        v-model="formInline.name"
        placeholder="input name"
        clearable
        style="width: 200px"
      />
    </el-form-item>
    <!-- <el-form-item label="Date: ">
      <el-date-picker
        v-model="formInline.date"
        type="date"
        placeholder="Pick a date"
        clearable
      />
    </el-form-item> -->
    <el-form-item>
      <el-button type="primary" @click="onSubmit"> Query</el-button>
    </el-form-item>
  </el-form>
  <el-table
    :data="tableData"
    stripe
    head-align="center"
    :cell-style="{ textAlign: 'center' }"
    :header-cell-style="{ 'text-align': 'center' }"
    height="520"
    style="margin-left: 20px; width: calc(100% - 40px)"
  >
    <!-- <el-table-column
      v-for="(column, index) in columns"
      :prop="column.prop"
      :label="column.prop"
      :key="index"
      width="auto"
    >
    </el-table-column> -->
    <el-table-column prop="Name" label="Name" width="120" />
    <el-table-column prop="PeopleId" label="PeopleId" width="150" />
    <el-table-column prop="ClassName" label="ClassName" width="240" />
    <el-table-column prop="MajorName" label="MajorName" width="200" />
    <el-table-column prop="CollegeName" label="CollegeName" width="240" />
    <!-- <el-table-column prop="PaperTestName" label="Paper Test Name" width="200" /> -->
    <el-table-column
      prop="CertificateNum"
      label="Obtained Certificate"
      width="200"
    >
      <template #default="{ row }">
        <el-link
          type="primary"
          @click.stop="openCertificateModal(row, row.CertificateNum)"
        >
          {{ row.CertificateNum }}
        </el-link>
      </template>
    </el-table-column>
    <!-- <el-table-column prop="Score" label="Score" width="80" /> -->
    <!-- <el-table-column prop="ModuleName" label="ModuleName" width="140" /> -->
    <!-- <el-table-column prop="CategoryName" label="CategoryName" width="140" /> -->
    <!-- <el-table-column
      prop="IfPassed"
      label="IfPassed"
      width="80"
      fixed="right"
      :formatter="ifPassFormatter"
    >
      <template #default="scope">
        <el-button :class="scope.row.ifPass == '1' ? 'pass' : 'noPass'">
          {{ scope.row.ifPass == "1" ? "Yes" : "No" }}
        </el-button>
      </template>
    </el-table-column> -->
    <!-- <el-table-column
      align="center"
      prop="accidentEverOccurred"
      label="AccidentEverOccurred"
      width="164"
      fixed="right"
      :formatter="accidentEverOccurredFormatter"
    >
    </el-table-column> -->
  </el-table>

  <el-dialog
    v-model="certificateVisiable"
    title="Obtained Certificate"
    width="900"
    center
  >
    <CertificateInfo :row="selectedRow" />
  </el-dialog>
</template>

<script setup lang="ts" name="ExperimentPersonnel">
import axios from "axios";
import { ref, reactive } from "vue";
import api from "@/utils/axiosInstance";
import CertificateInfo from "./CertificateInfo.vue";

let tableData = ref([]);
let loading = ref(false);
const formInline = reactive({
  name: "",
});

const onSubmit = () => {
  console.log("submit!");
  loading.value = true;
  api
    .post("/experimental-personnel/query", formInline)
    .then((response) => {
      // 处理API响应
      tableData.value = response.data;
    })
    .catch((error) => {
      // 处理错误
      console.log(error, "error");
    })
    .finally(() => {
      loading.value = false;
    });
};

function ifPassFormatter(row: any, column: any, cellValue: string) {
  console.log("**********");
  if (cellValue == "1") {
    return "Yes";
  } else if (cellValue == "0") {
    return "No";
  }
}

function accidentEverOccurredFormatter(
  row: any,
  column: any,
  cellValue: string
) {
  if (cellValue == "1") {
    return "Yes";
  } else if (cellValue == "0") {
    return "No";
  }
}

let certificateVisiable = ref(false);
let selectedRow = ref("");

function openCertificateModal(row: any, value: any) {
  selectedRow.value = row;
  certificateVisiable.value = true;
}
</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 280px;
}
.demo-form-inline .el-select {
  --el-select-width: 280px;
}
.pass,
.occurred {
  text-decoration: underline;
  background-color: #70c546;
  border-style: solid;
  border-radius: 5px;
  /* border-width: 3px; */
  border-color: #70c546;
}
.noPass,
.noOccurred {
  background-color: #f56c6c;
  border-style: solid;
  border-radius: 5px;
  border-width: 4px;
  border-color: #f56c6c;
}
.modal {
  width: 200px;
  height: 150px;
  background-color: skyblue;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 0 5px;
  text-align: center;
  position: fixed;
  left: 50%;
  top: 20px;
  margin-left: -100px;
}
</style>
